<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>卖家列表</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.0.1/css/bootstrap.min.css}" />
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th>订单ID</th>
                    <th>姓名</th>
                    <th>手机号</th>
                    <th>地址</th>
                    <th>金额</th>
                    <th>订单状态</th>
                    <th>支付状态</th>
                    <th>创建时间</th>
                    <th colspan="2">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="order : ${orderPage.content}">
                    <td>[[${order.orderId}]]</td>
                    <td>[[${order.buyerName}]]</td>
                    <td>[[${order.buyerPhone}]]</td>
                    <td>[[${order.buyerAddress}]]</td>
                    <td>[[${order.orderAmount}]]</td>
                    <td>[[${order.getOrderStatusEnum().getMessage()}]]</td>
                    <td>[[${order.getPayStatusEnum().getMessage()}]]</td>
                    <td>[[${#dates.format(order.createTime, 'yyyy-MM-dd HH:mm:ss')}]]</td>
                    <td><a th:href="@{'/seller/order/detail?orderId=' + ${order.orderId}}">详情</a></td>
                    <td><a th:if="${order.getOrderStatusEnum().code == 0}"
                           th:href="@{'/seller/order/cancel?orderId=' + ${order.orderId}}">取消</a></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-12 column">
            <ul class="pagination pagination-sm pull-right">
                <li th:classappend="${orderPage.getNumber() eq 0} ? 'disabled' : ''">
                    <a th:attr="href=${orderPage.getNumber() eq 0} ? '####' : @{'/seller/order/list?page=' + ${orderPage.getNumber()} + '&size=' + ${size}}" >上一页</a>
                </li>
                <li th:each="i : ${#numbers.sequence(1, orderPage.getTotalPages())}"
                    th:classappend="${(orderPage.getNumber() + 1) eq i} ? 'active' : ''">
                    <a th:attr="pageIndex=${i} - 1"
                       th:href="@{'/seller/order/list?page=' + ${i} + '&size=' + ${size}}">[[${i}]]</a>
                </li>
                <li th:classappend="${(orderPage.getNumber()+1) eq orderPage.getTotalPages()} ? 'disabled' : ''">
                    <a th:attr="href=${(orderPage.getNumber()+1) eq orderPage.getTotalPages()} ? '####' : @{'/seller/order/list?page=' + ${orderPage.getNumber() + 2} + '&size=' + ${size}}">下一页</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--<script th:src="@{/webjars/bootstrap/3.0.1/js/bootstrap.min.js}"></script>-->
<script>
    var webSocket = null;
    if ('WebSocket' in window) {
        webSocket = new WebSocket('ws://127.0.0.1:8080[[@{/webSocket}]]');
    } else {
        alert("该浏览器不支持WebSocket");
    }

    webSocket.onopen = function (event) {
        console.log('建立连接');
    };

    webSocket.onclose = function (event) {
        console.log('连接关闭');
    };

    webSocket.onmessage = function (event) {
        console.log('收到消息：' + event.data);
    };

    webSocket.onerror = function (event) {
        alert('webSocket通信发生错误！');
    };

    window.onbeforeunload = function () {
        webSocket.close();
    }
</script>
</body>
</html>